<template>
    <div class="codemirror">
        <codemirror :options="cmOptions" :code="value" @input="onCmCodeChange"></codemirror>
    </div>
</template>

<script type="text/ecmascript-6">
    import Codemirror from "vue-codemirror/src/codemirror";

    import 'codemirror/mode/clike/clike.js'

    // theme css
    import 'codemirror/theme/base16-dark.css'
    // active-line.js
    import 'codemirror/addon/selection/active-line.js'
    // styleSelectedText
    import 'codemirror/addon/selection/mark-selection.js'
    import 'codemirror/addon/search/searchcursor.js'
    // highlightSelectionMatches
    import 'codemirror/addon/scroll/annotatescrollbar.js'
    import 'codemirror/addon/search/matchesonscrollbar.js'
    import 'codemirror/addon/search/searchcursor.js'
    import 'codemirror/addon/search/match-highlighter.js'

    /**
     * @author 白雨浓
     * @date 2018/1/23 14:21
     *
     * Java代码高亮
     **/
    export default{
        name: 'AcHighLight',
        props: ['value'],
        data(){
            return {
                cmOptions: {
                    tabSize: 4,
                    lineNumbers: true,
                    line: true,
                    mode: 'text/x-java',
                    theme: 'base16-dark',
                },
            }
        },
        mounted(){
            this.$nextTick(() => {

            })
        },
        methods: {
            onCmCodeChange(newCode){
                this.$emit('input', newCode)
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .high-light {
    }
</style>